<!DOCTYPE html>
<html lang="zh">
<head>
    <title>找回密码</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../frame/asset/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/asset/css/common.css">
    <script src="../frame/asset/lib/jquery321.min.js"></script>
    <script src="../frame/asset/js/core.js"></script>
    <!-- 登录界面样式 -->
    <link rel="stylesheet" href="../frame/asset/css/login.css">
    <link rel="stylesheet" href="../frame/asset/css/admin.css">
    <link rel="stylesheet" href="../frame/asset/css/layer.css">
    <!-- END：登录界面样式 -->
</head>
<body class="layui-layout-body" layadmin-themealias="default">
<div class="layui-layout layui-layout-admin">
    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
        <div class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>忘记密码</h2>
                <p>通过密码找回问题与答案修改密码</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form" lay-filter="user-login-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="LAY-user-login-username"></label>
                    <input autocomplete="off" type="text" name="username" id="LAY-user-login-username"
                           lay-verify="required"
                           placeholder="登录名" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-question"></label>
                    <input autocomplete="off" type="text" name="question" id="LAY-user-login-question"
                           lay-verify="required"
                           placeholder="找回密码问题" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-answer"></label>
                    <input autocomplete="off" type="text" name="answer" id="LAY-user-login-answer"
                           lay-verify="required"
                           placeholder="找回密码答案" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-forget-pwd"></label>
                    <input autocomplete="new-new-pwd" type="password" name="pwd" id="LAY-user-forget-pwd"
                           lay-verify="pass"
                           placeholder="新密码" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-pwdTwo"></label>
                    <input autocomplete="new-new-pwd" type="password" name="pwdTwo" id="LAY-user-login-pwdTwo"
                           lay-verify="pass|rePass"
                           placeholder="再次输入新密码" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="user-forget-submit">申请找回
                    </button>
                </div>
                <div class="layui-trans layui-form-item layadmin-user-login-other">
                    <a href="login.html" class="layadmin-user-jump-change layadmin-link layui-hide-xs">已找回密码，去登陆</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 代码库导入 -->
<script src="../frame/asset/lib/layui/layui.js"></script>
<script src="../frame/asset/js/layui-elem.js"></script>
<!-- END:代码库导入 -->
<!-- ================================在这里编写页面的js代码================================ -->
<script>
    layui.use(['form', 'element', 'layer'], function () {
        var form = layui.form,
            element = layui.element,
            layer = layui.layer;

        /**
         * 验证部分数据正确性
         **/
        form.verify({
            "pass": [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            "rePass": function (value, item) { //value：表单的值、item：表单的DOM对象
                var pwd = $("#LAY-user-forget-pwd").val();
                if (value !== pwd) {
                    return "两次输入的密码不一致";
                }
            },
        });

        //监听提交
        form.on('submit(user-forget-submit)', function (data) {
            // 首先配置记住密码
            var userInfo = {
                "username": data.field.username,
                "question": data.field.question,
                "answer": data.field.answer,
                "password": data.field.pwd
            };
            layer.msg("正在找回", {
                icon: 16,
                time: 10000
            })
            util.httpRequest.post("../user/pwd/forget", userInfo, function (msg) {
                layer.closeAll();
                if (msg.code === 200) {
                    layer.msg('找回成功，请重新登录', {
                        offset: '50px'
                        , icon: 1
                        , time: 1000
                    });
                    //把登录用户数据保存到浏览器
                    setTimeout(function () {
                        window.location.href = "login.html";
                    }, 1000)
                } else {
                    layer.msg(msg.errorMessage, {
                        offset: '50px'
                        , icon: 2
                        , time: 2000
                    });
                }
            });
            return false;
        });
    });
</script>
<!-- ================================END:在这里编写页面的js代码================================ -->
</body>
</html>